<template>
  <view :class="keyboardStyle">
    <view v-if="mode === 'digit' || digital" class="digit-keyboard">
      <view class="digit-button-box">
        <view v-for="digit in digits" :key="digit" class="key-button digit" @tap="typing(digit)">
          {{ digit }}
        </view>
        <view class="key-button digit">
          <i v-if="digital" class="iconfont icon-shouqijianpan" @tap="deactivate"></i>
          <i v-else class="iconfont icon-ABC" @tap="typingLetter"></i>
        </view>
      </view>
      <view class="special-button-box">
        <view class="key-button special-button gray" @tap="backspace">
          <i class="iconfont icon-backspace large"></i>
        </view>
        <view class="key-button special-button gray" @tap="enter">
          <i class="iconfont icon-huiche large"></i>
        </view>
      </view>
    </view>
    <view v-else class="full-keyboard">
      <view v-for="(letters, index) in lines" :key="index" class="line">
        <view v-if="index === 3 && mode === 'letter'" class="letter key-button special-key gray" @tap="toggleCase">
          <i :class="`iconfont ${lowercase ? 'icon-xiaoxie' : 'icon-daxie'}`"></i>
        </view>
        <view v-for="letter in letters" :key="letter" class="letter key-button normal" @tap="typing(letter)">
          {{ letter
          }}
        </view>
        <view v-if="index === 3" class="letter key-button special-key gray" @tap="backspace">
          <i class="iconfont icon-backspace"></i>
        </view>
      </view>
      <view class="line special-line">
        <view class="letter key-button swith-key gray">
          <i v-if="mode === 'letter'" class="iconfont icon-fuhao" @tap="typingSymbol"></i>
          <i v-if="mode === 'symbol'" class="iconfont icon-ABC" @tap="typingLetter"></i>
        </view>
        <view class="letter key-button space" @tap="typing(' ')">
          <text class="logo">
            Magician 安全键盘
          </text>
        </view>
        <view class="letter key-button swith-key gray" @tap="typingDigit">
          <i class="iconfont icon-shuzi"></i>
        </view>
        <view class="letter key-button swith-key gray" @tap="enter">
          <i class="iconfont icon-huiche"></i>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { digits, disorder, KEYBOARD_MODE, natural, order, symbols } from './utils'

export default {
  props: {
    // 是否为纯数字键盘
    digital: {
      type: [Boolean, String],
      default: false
    },
    // 是否无序的排序键盘
    disorderly: {
      type: [Boolean, String],
      default: false
    }
  },
  data() {
    return {
      cls: '',
      visible: false, // 是否显示
      digits: [], // 自然数数组
      lines: [], // 字母+数字数组
      lowercase: true, // 是否小写输入状态
      mode: KEYBOARD_MODE.LETTER, // 键盘模式
      keys: [] // 键入的键值
    }
  },
  // app中不生效，不知道为什么
  /* model: {
      prop: 'value',
      event: 'typing'
    }, */
  computed: {
    keyboardStyle() {
      return `v-keyboard ${this.cls}`
    }
  },
  watch: {
    lowercase(val) {
      const [...temp] = this.lines
      temp.forEach(line => {
        line.forEach((letter, index) => {
          line[index] = val ? letter.toLowerCase() : letter.toUpperCase()
        })
      })
      this.lines = temp
    },
    visible(val) {
      this.cls = val ? 'slideup' : 'slidedown'
    }
  },
  created() {
    this.lines = this.disorderly ? disorder() : order
    this.digits = this.disorderly ? digits() : natural
  },
  methods: {
    // 大小写转换
    toggleCase() {
      this.lowercase = !this.lowercase
    },
    // 输入符号
    typingSymbol() {
      this.mode = KEYBOARD_MODE.SYMBOL
      this.lines = symbols
    },
    // 输入字母
    typingLetter() {
      this.mode = KEYBOARD_MODE.LETTER
      this.lines = this.disorderly ? disorder() : order
    },
    // 键入数字
    typingDigit() {
      this.mode = KEYBOARD_MODE.DIGIT
    },
    // 键盘键入
    typing(input) {
      this.keys.push(input)
      // app中v-model不生效，改用事件方式在外处理
      // this.$emit('typing', this.keys.join(''));

      this.$emit('typing', {
        backspace: false,
        char: input
      })
    },
    // 退格键
    backspace() {
      if (this.keys.length) {
        this.keys.pop()
      }
      // this.$emit('typing', this.keys.join(''));
      this.$emit('typing', {
        backspace: true
      })
    },
    // 键入回车
    enter() {
      // this.deactivate();
      this.$emit('enter')
    },
    // 激活键盘
    activate() {
      // #ifdef APP-PLUS
      plus.key.hideSoftKeybord()
      // #endif
      this.visible = true
    },
    // 隐藏键盘
    deactivate() {
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import './css.scss';
@import './icon/icon.css';

.key-button {
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  border: 2rpx solid #e6e6e6;
  color: #333;
  background-color: #fff;
  box-shadow: 0 4rpx 4rpx rgba(230, 230, 230, 0.7);
  border-radius: 8rpx;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;

  &:active {
    background: #d6d6d6;
    scale: 0.7;
  }
}

.v-keyboard {
  transform: translateY(100%);
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #f5f5f5;
  padding: 12rpx 0;
  z-index: 100;

  /*全键盘*/
  .full-keyboard {
    .line {
      display: flex;
      justify-content: space-around;
      padding: 0 18rpx;
      margin-bottom: 12rpx;

      .letter {
        height: 60rpx;
        line-height: 60rpx;
        font-size: 28rpx;
        margin-right: 10rpx;
      }

      .normal {
        flex: 1;
      }

      .special-key {
        width: 80rpx;
      }
    }

    .special-line {
      display: flex;
      justify-content: space-around;
      padding: 0 18rpx;

      .space {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .swith-key {
        width: 80rpx;
      }

      .logo {
        font-size: 12px;
      }
    }
  }

  /*数字键盘*/
  .digit-keyboard {
    display: flex;
    flex-direction: row;
    padding-top: 8rpx;

    .digit-button-box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      padding: 0 12rpx;
      flex: 80;

      .digit {
        width: 130rpx;
        height: 80rpx;
        line-height: 80rpx;
      }
    }

    .special-button-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex: 20;

      .special-button {
        display: block;
        line-height: 160rpx;
        height: 160rpx;
        width: 120rpx;
        margin-bottom: 10rpx;
      }
    }
  }

  .gray {
    background: #e1e1e1;

    &:active {
      background: #fff;
    }
  }

  .large {
    font-size: 50rpx;
  }
}
</style>
